<template>
  <div class="main-monitor">
      <a-row :gutter="16">
        <a-col :span="4">
          <section style="margin-top: 16px">
            <h3>机房</h3>
            <a-button block>主机</a-button>
          </section>
          <section>
            <h3>网络</h3>
            <a-button block style="margin-bottom:6px">cdn</a-button>
            <a-button block>主域名</a-button>
          </section>
          <section>
            <h3>前台</h3>
            <a-button block style="margin-bottom:6px">静态资源</a-button>
            <a-button block style="margin-bottom:6px">接口响应</a-button>
            <a-button block>js 报错</a-button>
          </section>
          <section>
            <h3>主要页面</h3>
            <a-button block>页面监控</a-button>
          </section>
        </a-col>
        <a-col :span="20" class="operation-area">
          
        </a-col>
      </a-row>    
    
  </div>
</template>

<script>

export default {
  name: 'monitor',
  
}
</script>

<style scoped lang="less">
.main-monitor{
  padding: 0 12px;
  background-color: #fff;
  height: calc(100vh - 184px);
  section{
    margin-top:10px
  }
  .operation-area{
    height: calc(100vh - 184px);
    background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%),
                      linear-gradient(rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 10px 10px;
  }
}
</style>
